<template>
	<view>
		<nav-bar title="积分商城"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="user_info_bg">
			<view class="user_info_box">
				<image :src="userInfo.headImg" mode="aspectFill"></image>
				<view>
					<text>{{userInfo.nickName}}</text>
					<view>积分：{{userInfo.integralCount || 0}}</view>
				</view>
			</view>
		</view>
		<!-- 商品类型筛选 -->
		<goods-type-select type="integral" @change="goodsTypeChange"></goods-type-select>
        <mescroll-body ref="mescrollRef" :height="-328" @init="mescrollInit" :down="downOption" :up="downOption" @down="downCallback" @up="upCallback">
            <integral-waterfall-goods ref="waterfall" :list="goodsDataList"></integral-waterfall-goods>
        </mescroll-body>
	</view>
</template>

<script>
	import goodsTypeSelect from '@/components/module/goods_type_select';
	import integralWaterfallGoods from '@/components/module/integral_waterfall_goods';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			goodsTypeSelect,
			integralWaterfallGoods
		},
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				goodsType: "",
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				goodsDataList: [],
			};
		},
		//第一次加载
		onLoad(e) {
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			goodsTypeChange(val){
				this.goodsType = val.objId;
				this.mescroll.triggerDownScroll();
			},
            /*下拉刷新的回调 */
            downCallback() {
            	//联网加载数据
            	this.loadData(1);
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
            	//联网加载数据
            	this.loadData(page.num);
            },
            loadData(pageNo) {
                let httpData = {
                    pageNo: pageNo,
                    pageSize: 15
                };
                if(this.goodsType){
                	httpData.typeId = this.goodsType;
                }
                this.$http
                	.post('api/shop_integral/v1/list', httpData,{
                		load:false
                	}).then(res => {
                		uni.stopPullDownRefresh();
                		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
                		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
                		
                		if (pageNo == 1) {
                			this.goodsDataList = res.data;
                		} else {
                			this.goodsDataList = this.goodsDataList.concat(res.data);
                		}
                	}).catch(() => {
                		//联网失败, 结束加载
                		this.mescroll.endErr();
                	});
            },
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.user_info_bg {
		background: #ffffff;
		padding: 30rpx;

		.user_info_box {
			padding: 30rpx;
			@include theme('gradient_bg');
			border-radius: 20rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			>image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 5rpx solid rgba(255, 255, 255, 0.4);
			}

			>view {
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				font-size: 32rpx;
				color: #ffffff;
				margin-left: 30rpx;

				>text {
					padding-bottom: 20rpx;
				}

				>view {
					padding: 8rpx 20rpx;
					background: $viceColor;
					font-size: 24rpx;
					border-radius: 21rpx;
					color: $themeColor;
				}
			}
		}
	}
</style>
